<!DOCTYPE html>
<html>
    <head>
        <title>Asynchronous Loading</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
        <script>
            function initialize(){
                var mapOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(-34.397, 150.644),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            }

            function loadScript(){
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA4FG41m0RlufUy9BoCihvSH9FSCowWlNo&sensor=false&callback=initialize';
                document.body.appendChild(script);
            }

            window.onload = loadScript;
        </script>
    </head>
    <body>
        <div id="map-canvas">
        </div>
    </body>
</html>
